<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="PostForm 基本类型">
      <div class="w-full flex">
        <div class="w-1/5">
          <ul>
            <li><a-button type="default" @click="jsonBody">Json: 只有body参数</a-button></li>
            <li><a-button type="default" @click="jsonPath">Json: 只有路径参数</a-button></li>
            <li><a-button type="default" @click="jsonBodyAndPath">Json: 路径参数+body</a-button></li>
            <li><a-button type="default" @click="jsonBasicList">Json: 基本类型列表</a-button></li>
            <li><a-button type="default" @click="jsonObjectList">Json: 对象列表</a-button></li>
            <li><a-button type="default" @click="jsonPager">Json: 分页查询</a-button></li>
            <li><a-button type="default" @click="jsonNoBody">Json: 无参数</a-button></li>
            <li><a-button type="primary" @click="formBasic">Form: 基本类型</a-button></li>
            <li><a-button type="primary" @click="formMultiBasic">Form: 多个基本类型</a-button></li>
            <li><a-button type="primary" @click="formObject">Form: 单个自定义类型</a-button></li>
          </ul>
        </div>
        <div class="w-2/5 bg-gray-100">
          <h2>Ts 源码:</h2>
          <CodeEditor :value="tsSourceRef" :readonly="true" />
        </div>
        <div class="w-2/5 bg-red-100">
          <h2>Java 源码:</h2>
          <CodeEditor :value="javaSourceRef" :readonly="true" />
        </div>
      </div>
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="响应结果" :can-expan="false">
      <JsonPreview :data="respRef" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';

  import demo from '@/api/toolkit/demo';

  import { useMessage } from '@/hooks/web/useMessage';
  import { JsonPreview, CodeEditor } from '@/components/CodeEditor';
  import { ref } from 'vue';
  import demoSource from './demoSource';
  import DemoRequest from '@/api/model/DemoRequest';
  import DemoQuery from '@/api/model/DemoQuery';

  const { createMessage } = useMessage();

  const respRef = ref({});

  const tsSourceRef = ref('');

  const javaSourceRef = ref('');

  async function jsonBody() {
    // 请求参数
    const request: DemoRequest = {
      id: 1001,
      name: 'zhangsan',
      man: false,
      createTime: new Date(),
    };

    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.jsonBody(request);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonBodyTs;
    javaSourceRef.value = demoSource.jsonBodyJava;
  }

  async function jsonPath() {
    const id: number = 1001;

    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.jsonPath(id);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonPathTs;
    javaSourceRef.value = demoSource.jsonPathJava;
  }

  async function jsonBodyAndPath() {
    const id: number = 1001;
    // 请求参数
    const request: DemoRequest = {
      id: 1001,
      name: 'zhangsan',
      man: false,
      createTime: new Date(),
    };

    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.jsonBodyAndPath(id, request);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonBodyAndPathTs;
    javaSourceRef.value = demoSource.jsonBodyAndPathJava;
  }

  async function jsonBasicList() {
    const list: number[] = [1001, 1002, 1003];

    // 发起请求: await 同步等待响应结果, 参数为 list 对象，不需要 {} 包裹
    let respData = await demo.jsonBasicList(list);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonBasicListTs;
    javaSourceRef.value = demoSource.jsonBasicListJava;
  }

  async function jsonObjectList() {
    // prettier-ignore
    const demos: DemoRequest[] = [
      {  id: 1001, name: 'zhangsan', man: false, createTime: new Date(), },
      {  id: 1002, name: 'lisi', man: false, createTime: new Date(), }
    ];

    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.jsonObjectList(demos);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonObjectListTs;
    javaSourceRef.value = demoSource.jsonObjectListJava;
  }

  async function jsonPager() {
    // prettier-ignore
    const query: DemoQuery = {
      name:'zhangsan',
      page: 1,
      pageSize:10
    }

    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.jsonPager(query);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonPagerTs;
    javaSourceRef.value = demoSource.jsonPagerJava;
  }

  async function jsonNoBody() {
    // 发起请求: await 同步等待响应结果
    let respData = await demo.jsonNoBody();
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.jsonNoBodyTs;
    javaSourceRef.value = demoSource.jsonNoBodyJava;
  }

  async function formBasic() {
    // 请求参数
    const name: string = 'hello';
    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.formBasic({ name });
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.formBasicTs;
    javaSourceRef.value = demoSource.formBasicJava;
  }

  async function formMultiBasic() {
    // 请求参数
    const name: string = 'hello';
    const id: number = 1001;
    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.formMultiBasic({ id, name });
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.formMultiBasicTs;
    javaSourceRef.value = demoSource.formMultiBasicJava;
  }

  async function formObject() {
    // prettier-ignore
    const query: DemoQuery = {
      name:'zhangsan',
      page: 1,
      pageSize:10
    }

    // 发起请求: await 同步等待响应结果, 参数为 json 对象
    let respData = await demo.formObject(query);
    // 处理响应结果
    respRef.value = respData;

    createMessage.info('请求成功');
    tsSourceRef.value = demoSource.formObjectTs;
    javaSourceRef.value = demoSource.formObjectJava;
  }
</script>

<style lang="less" scoped>
  li {
    margin-top: 5px;
  }
</style>
